<template>
  <div class="tabbar">
    <div
      v-for="(item, idx) in leftItems"
      :key="item.itemMark"
      class="itemWrap"
      :class="{ 'left-gap': idx === leftItems.length - 1 }"
      @click="getval(item.itemMark)"
    >
      <van-icon
        :name="item.icon"
        :class="{ active: selected === item.itemMark }"
        size="26px"
      />
      <span slot="txt">{{ item.itemTxt }}</span>
    </div>
    <!-- 中间悬浮按钮 -->
    <div
      class="middle-item"
      @click="getval(itemList[middleIndex].itemMark)"
    >
      <van-icon
        :name="itemList[middleIndex].icon"
        :class="{ active: selected === itemList[middleIndex].itemMark }"
        size="32px"
      />
      <span slot="txt">{{ itemList[middleIndex].itemTxt }}</span>
    </div>
    <div
      v-for="(item, idx) in rightItems"
      :key="item.itemMark"
      class="itemWrap"
      :class="{ 'right-gap': idx === 0 }"
      @click="getval(item.itemMark)"
    >
      <van-icon
        :name="item.icon"
        :class="{ active: selected === item.itemMark }"
        size="26px"
      />
      <span slot="txt">{{ item.itemTxt }}</span>
    </div>
  </div>
</template>

<script>
import Item from "./item.vue";
// 需确保已全局/局部注册Vant Icon组件
import { Icon } from 'vant';

export default {
  components: {
    Item,
    'van-icon': Icon,
  },
  data() {
    return {
      selected: this.$route.path.substr(1),
      middleIndex: 2, // 中间按钮索引
      itemList: [
        {
          itemTxt: "待办",
          itemMark: "daiban",
          icon: "todo-list-o",
        },
        {
          itemTxt: "消息",
          itemMark: "message",
          icon: "chat-o",
        },
        {
          itemTxt: "首页",
          itemMark: "home",
          icon: "apps-o",
        },
        {
          itemTxt: "通讯录",
          itemMark: "contacts",
          icon: "friends-o",
        },
        {
          itemTxt: "我的",
          itemMark: "my",
          icon: "user-o",
        },
      ],
    };
  },
  computed: {
    leftItems() {
      // 中间按钮左侧
      return this.itemList.slice(0, this.middleIndex);
    },
    rightItems() {
      // 中间按钮右侧
      return this.itemList.slice(this.middleIndex + 1);
    },
  },
  methods: {
    getval(val) {
      this.selected = val;
      this.$router.push("/" + this.selected);
    },
  },
};
</script>

<style scoped>
.tabbar {
  width: 100vw;
  height: 64px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: #fff;
  box-shadow: 0 -2px 16px 0 rgba(22, 119, 255, 0.08);
  z-index: 1000;
  justify-content: space-around;
  align-items: flex-end;
  overflow: visible;
  border-radius: 18px 18px 0 0;
}

.itemWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 5;
  margin: 0 4px;
  height: 64px;
  justify-content: center;
  cursor: pointer;
  transition: margin 0.2s;
}

.itemWrap.left-gap {
  margin-right: 32px !important;
}

.itemWrap.right-gap {
  margin-left: 32px !important;
}

.van-icon {
  font-size: 26px;
  margin-bottom: 2px;
  color: #b2b2b2;
  border-radius: 8px;
  border: 2px solid #e5eaf3;
  padding: 2px 4px;
  box-sizing: border-box;
  background: transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.van-icon.active {
  color: #fff !important;
  border-color: #1677ff !important;
  background: #1677ff !important;
  font-weight: bold;
  text-shadow: 0 2px 8px #1677ff22;
}

.itemWrap span[slot="txt"] {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
  margin-bottom: 4px;
  display: block;
  text-align: center;
  letter-spacing: 1px;
}
.itemWrap .active + span[slot="txt"] {
  color: #1677ff;
  font-weight: bold;
}

.middle-item {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 64px;
  height: 64px;
  pointer-events: auto;
  cursor: pointer;
}

.middle-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #1677ff 60%, #50aaff 100%);
  border-radius: 50%;
  box-shadow: 0 6px 18px 0 rgba(22, 119, 255, 0.18);
  z-index: 1;
  display: block;
}

.middle-item .van-icon {
  position: relative;
  z-index: 2;
  color: #fff !important;
  font-size: 32px !important;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0;
  filter: drop-shadow(0 2px 8px #1677ff88);
  transition: transform 0.18s cubic-bezier(0.4, 2, 0.6, 1);
}

.middle-item .active {
  transform: scale(1.12) rotate(-8deg);
}

.middle-item span[slot="txt"] {
  margin-top: 44px;
  color: #1677ff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  z-index: 2;
}
</style>
